<template>
  <view class="search">
    <view class="search-header">
      <view class="search-header-top flex flex-align  flex-bt">
        <view class="search-header-left flex flex-align">
          <uni-icons type="search" size="30" color="#969799"></uni-icons>
          <input type="text" placeholder="输入关键词搜索">
        </view>
        <view class="search-header-right">
          搜索
        </view>
      </view>
      <view class="search-header-select flex flex-align">
        <view class="flex-1" :class="{active:tabIndex==1}" @click="tabInd(1)">默认</view>
        <view class="flex-1 flex flex-align flex-center" :class="{active:tabIndex==2}" @click="tabInd(2)">
          <view>销量</view>
          <image src="@/static/home/home_13.png" mode="scaleToFill"></image>
        </view>
        <view class="flex-1 flex flex-align flex-center" :class="{active:tabIndex==3}" @click="tabInd(3)">
          <view>价格</view>
          <image src="@/static/home/home_13.png" mode="scaleToFill"></image>
        </view>
        <view class="flex-1" @click="changeTypes">
          <image :src="isType?'/static/home/home_16.png':'/static/home/home_15.png'" mode="scaleToFill"></image>
        </view>
      </view>
    </view>
    <view style="height: 230rpx;"></view>
    <view class="search-list" :class="{flexLine:isType}">
      <view class="list flex" v-for="(item,index) in 20" :key="index">
          <view class="leftImg">
            <image src="@/static/home/home_12.png" mode="scaleToFill" />
          </view>
          <view class="leftMain flex flex-direction flex-bt">
            <view>
              <view class="title two-omit">妮娜皇后葡萄新妮娜皇后葡萄新鲜水果云南鲜水果云南</view>
              <view class="miaoshu one-omit">全金属系统直击深层肌肉群，冷热…</view>
            </view>
            
            <view class="flex flex-bt flex-align">
              <view class="price">¥99.98 <text>起</text></view>
              <view class="sockt">325已售</view>
            </view>
          </view>
        </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useAuthStore } from '@/stores/counter'
const tabIndex = ref(1)
const counter = useAuthStore()
const isType = ref(false)
isType.value = counter.getisType
function tabInd(index: number) {
  tabIndex.value = index
}
watch(
  () => counter.isType,
  (newValue) => {
    console.log(newValue)
    isType.value = newValue;
  }
);
function changeTypes() {
  counter.changeType()
}

</script>

<style scoped lang="scss">
.search{
  .search-header{
    width: 100%;height: 200rpx;background: #fff;border-radius: 0 0 40rpx 40rpx;padding-top: 30rpx;position: fixed;top:0;left:0;width: 100%;z-index: 11;
    .search-header-top{
      background: #F5F6F7;width:650rpx;margin: 0rpx auto 30rpx;height: 80rpx;border-radius: 80rpx;padding: 0 20rpx;
    }
    .search-header-left{width: 500rpx;
      input{width: 100%;height: 100%;border: none;font-size: 26rpx;}
    }
   .search-header-right{
     text-align: center;background: #FE7431;font-size: 26rpx;padding: 12rpx 30rpx;color: #fff;border-radius: 40rpx;
    }
  .search-header-select{
    .flex-1{
      text-align: center;font-size: 28rpx;color: #969799;font-weight: bold;
        image{width: 38rpx;height: 38rpx;margin-top: 5rpx;}
       
        &:nth-child(4){
          image{width: 56rpx;height: 56rpx;}
        }
      }
    }
    .flex-1.active{
      color: #323233;
    }
  }
 .search-list{padding: 20rpx;
    .list{margin-bottom: 20rpx;background:#fff;padding: 20rpx;border-radius: 20rpx;
      image{width: 172rpx;height: 172rpx;margin-right: 20rpx;}
      .miaoshu{color: #969799;font-size: 24rpx;margin-top: 10rpx;}
      .price{color: $uni-color-error;font-size: 32rpx;font-weight: bold;
        text{font-size: $uni-font-size-sm;font-weight: normal;}
      }
      .sockt{color: #969799;font-size: 24rpx;}
      .leftMain{width: 100%;}
    }

    .list:last-child{margin-bottom: 0;}
  }
  .search-list.flexLine{flex-wrap: wrap;display: flex;box-sizing: border-box;
    .list{width: 345rpx;margin-bottom: 20rpx;display: block;margin-right: 20rpx;padding: 0;
      .leftImg{
        image{width: 100%;height: 340rpx;}
      }
      .leftMain{padding:0 20rpx 20rpx;width: 305rpx;}
    }
    .list:nth-child(2n){margin-right: 0;}
  }
}
</style>